<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org/">
<head>
    <meta charset="UTF-8">
    <base th:href="${#request.getContextPath()+'/'}">
    <title>Title</title>
</head>
<body>

<div th:fragment="pageDiv">
    <link rel="stylesheet" href="lib/layer/ui/css/layui.css" media="all">
    <!-- 用来放分页导航条 -->
    <div id="test1"></div>
    <!-- 2.引入分页插件的js包 -->
    <script src="lib/layer/ui/layui.js"></script>
    <!-- 在JS中获取req中的值 -->
    <script th:inline="javascript">
        var totalCount = [[${page.total}]];
        var pageSize = [[${page.size}]];
        var pageNum = [[${page.current}]];
        var url =[[${url}]];
    </script>

    <script>
        // 3.初始化分页导航条
        layui.use('laypage', function(){
            // 获取前端的分页对象
            var laypage = layui.laypage;
            laypage.render({ // 渲染
                elem: 'test1' //注意，这里的 test1 是 ID，不用加 # 号
                ,count: totalCount //数据总数，从服务端得到
                ,limit: pageSize // 每页显示条
                ,curr: pageNum
                ,layout: ['prev', 'page', 'next', 'limit','count']
                ,limits:[5,10,20,30]
                ,jump: function(obj, first){ // 切换页面的函数
                    if(!first){
                        location.href=url+"?current="+obj.curr+"&size="+obj.limit
                    }
                }
            });
        });
    </script>

</div>
</body>
</html>